<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薪资查询</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/salary.css">
</head>

<body>
    <!-- 顶部模块 -->
    <header class="header">薪资查询</header>
    <!-- 参考薪资模块 -->
    <section class="content reference">
        <h4 class="hd">参考薪资</h4>
        <div class="re_bd">
            <p>北京 地区 JAVA 岗位 1-3年工作经验的参考薪资</p>
            <p><span>￥</span>1,8821</p>
            <p>现有23131个岗位</p>
        </div>
    </section>
    <!-- 薪资发布模块 -->
    <section class="content publish">
        <h4 class="hd">薪资发布</h4>
        <div class="pub_bd">
            <div class="circle">
                <img src="icons/circle.png" alt="">
            </div>
            <ul class="data">
                <li class="data_hd">
                    <span>区间</span>
                    <span>占比</span>
                </li>
                <li class="data_item">
                    <span>4.5k-6k
                    </span>
                    <span>
                        <span class="orange"></span>
                    </span>
                    <span>1.2%</span>
                </li>
                <li class="data_item">
                    <span>6k-8k
                    </span>
                    <span>
                        <span class="deepgreen"></span>
                    </span>
                    <span>3.5%</span>
                </li>
                <li class="data_item">
                    <span>8k-10k
                    </span>
                    <span>
                        <span class="deepblue"></span>
                    </span>
                    <span>4.4%</span>
                </li>
                <li class="data_item">
                    <span>10k-15k
                    </span>
                    <span>
                        <span class="green"></span>
                    </span>
                    <span>16%</span>
                </li>
                <li class="data_item">
                    <span>15k-20k
                    </span>
                    <span>
                        <span class="red"></span>
                    </span>
                    <span>18.9%</span>
                </li>
                <li class="data_item">
                    <span>20k-30k
                    </span>
                    <span>
                        <span class="blue"></span>
                    </span>
                    <span>35.7%</span>
                </li>
                <li class="data_item">
                    <span>30k-50k
                    </span>
                    <span>
                        <span class="yellow"></span>
                    </span>
                    <span>18.8%</span>
                </li>
            </ul>
        </div>
    </section>
    <!-- 各地区薪资模块 -->
    <section class="content address">
        <h4 class="hd">各地区薪资</h4>
        <ul class="ad_bd">
            <li class="ad_item">
                <span class="icon"><img src="icons/sort1.png" alt=""></span>
                <span>北京</span>
                <hr>
                <span>
                    <span class="dollor">￥</span>18981
                </span>
            </li>
            <li class="ad_item">
                <span class="icon"><img src="icons/sort2.png" alt=""></span>
                <span>上海</span>
                <hr>
                <span>
                    <span class="dollor">￥</span>18000
                </span>
            </li>
            <li class="ad_item">
                <span class="icon"><img src="icons/sort3.png" alt=""></span>
                <span>广州</span>
                <hr>
                <span>
                    <span class="dollor">￥</span>15880
                </span>
            </li>
            <li class="ad_item">
                <span class="icon"><img src="icons/sort4.png" alt=""></span>
                <span>杭州</span>
                <hr>
                <span>
                    <span class="dollor">￥</span>14880
                </span>
            </li>
            <li class="ad_item">
                <span class="icon"><img src="icons/sort5.png" alt=""></span>
                <span>天津</span>
                <hr>
                <span>
                    <span class="dollor">￥</span>13880
                </span>
            </li>
            <li class="ad_item">
                <span class="icon"><img src="icons/sort6.png" alt=""></span>
                <span>太原</span>
                <hr>
                <span>
                    <span class="dollor">￥</span>12880
                </span>
            </li>
            <li class="ad_item">
                <span class="icon"><img src="icons/sort7.png" alt=""></span>
                <span>西安</span>
                <hr>
                <span>
                    <span class="dollor">￥</span>10000
                </span>
            </li>
        </ul>
    </section>
    <script src="js/flexible.js"></script>
</body>

</html>